<template>
    <view class="page">
        <view class="search-wrapper">
            <uni-search-bar 
                radius="100" 
                v-model="form.name"
                placeholder="输入学生姓名、手机号等" 
                @confirm="handleSearch" />
        </view>
        <view class="block-10"></view>
        <view class="list-content">
            <view class="filter-wrapper">
                <view class="grade">{{form.classesName}}</view>
                <view class="filter-group">
                    <view class="btn-group">
                        <view class="button" 
                            :class="{'active': this.active == 0}" 
                            @click="filterClick(0)">全部</view>
                        <view class="button" 
                            :class="{'active': this.active == 1}" 
                            @click="filterClick(1)">已筛查</view>
                        <view class="button" 
                            :class="{'active': this.active == 2}" 
                            @click="filterClick(2)">未筛查</view>
                    </view>
                </view>
            </view>
            <view class="list-wrapper">
                <uni-list v-if="total > 0">
                 	<uni-list-item v-for="item in listData" :key="item.studentId"
                        @click="hanldeDetail(item.studentId)"
                        showArrow 
                        clickable
                        :title="item.name" 
                        :note="item.advise" 
                        thumb="../../static/nan.png"
                        thumb-size="lg">
                        <template v-slot:footer>
                            <view class="item-footer" v-if="item.checkDate">
                                <view class="item-time">{{item.checkDate}}</view>
                                <uni-tag text="正常" type="success" size="small" />
                            </view>
                            <view class="item-footer" v-else>
                                <view class="item-time">未筛查</view>
                            </view>
                        </template>
                    </uni-list-item>
                </uni-list>
                <view class="empty" v-else></view>
                <uni-load-more :status="status" @clickLoadMore="handleLoadMore"/>
            </view>
        </view>
    </view>
</template>

<script>
    import { getStudPage } from '@/api/screen.js'
    export default {
        data() {
            return {
                active: 0,
                status: 'more',
                form: {
                    classId: undefined,
                    classesName: '',
                    pageNo: 1,
                    pageSize: 10,
                    name: '',
                    screeningStatus: 0 //筛查状态 1 未筛查 2 筛查
                },
                listData:[],
                total: 0
            }
        },
        onLoad(e) {
            this.form.classId = e.classesId
            this.form.classesName = e.classesName
            //获取列表数据
            this.handleGetData()
        },
        methods: {
            handleGetData() {
                this.status = 'loading'
                getStudPage(this.form).then(res => {
                    console.log(res)
                    this.listData = this.listData.concat(res.data.records)
                    this.total = res.data.total
                    //控制加载状态
                    if(this.total == 0 || this.total == this.listData.length) {
                        this.status = 'noMore'
                    }
                    else if(this.total > this.listData.length) {
                        this.status = 'more'
                    }
                })
            },
            filterClick(val) {
                this.active = val
                this.form.screeningStatus = val
                this.form.pageNo = 1
                this.listData = []
                this.handleGetData()
            },
            //搜索
            handleSearch() {
                this.listData = []
                this.handleGetData()
            },
            //加载更多
            handleLoadMore() {
                if(this.total >= this.listData.length) {
                    return
                }
                this.form.pageNo ++ 
                this.handleGetData()
            },
            hanldeDetail(studentId) {
                uni.navigateTo({
                	url: '/pages/screen/screen?studentId=' + studentId
                })
            }
        }
    }
</script>

<style lang="less">
@import url('./list.less');
</style>

